<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          媒体服务器
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-emby">
          <div class="card-cover card-cover-blurred text-center bg-green">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded"
                  style="background-image: url(../static/img/emby.png)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Emby</div>
            <div class="text-muted">{% if Config.media.media_server == "emby" %}<span class="badge bg-green"
                                                                                      title="已开启"></span>
              正在使用{% endif %}</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-jellyfin">
          <div class="card-cover card-cover-blurred text-center bg-purple">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded"
                  style="background-image: url(../static/img/jellyfin.jpg)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Jellyfin</div>
            <div class="text-muted">{% if Config.media.media_server == "jellyfin" %}<span class="badge bg-green"
                                                                                          title="已开启"></span>
              正在使用{% endif %}</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-plex">
          <div class="card-cover card-cover-blurred text-center bg-yellow">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded"
                  style="background-image: url(../static/img/plex.png)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Plex</div>
            <div class="text-muted">{% if Config.media.media_server == "plex" %}<span class="badge bg-green"
                                                                                      title="已开启"></span>
              正在使用{% endif %}</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-emby" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Emby</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">服务器地址 <span class="form-help"
                                                                  title="配置IP地址和端口，如为https则需要增加https://前缀"
                                                                  data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.emby %}{{ Config.emby.host or '' }}{% endif %}" id="emby.host"
                     class="form-control" placeholder="http://127.0.0.1:8096">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">Api Key <span class="form-help"
                                                               title="在Emby设置->高级->API密钥处生成，注意不要复制到了应用名称"
                                                               data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.emby %}{{ Config.emby.api_key or '' }}{% endif %}"
                     id="emby.api_key" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_mediaserver_config('emby')" id="emby_test_btn" class="btn me-auto">
          测试
        </a>
        <a href="javascript:save_mediaserver_config('emby')" id="emby_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-jellyfin" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Jellyfin</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">服务器地址 <span class="form-help"
                                                                  title="配置IP地址和端口，如为https则需要增加https://前缀"
                                                                  data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.jellyfin %}{{ Config.jellyfin.host or '' }}{% endif %}"
                     id="jellyfin.host" class="form-control" placeholder="http://127.0.0.1:8096">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">Api Key <span class="form-help"
                                                               title="在Jellyfin设置->高级->API密钥处生成"
                                                               data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.jellyfin %}{{ Config.jellyfin.api_key or '' }}{% endif %}"
                     id="jellyfin.api_key" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_mediaserver_config('jellyfin')" id="jellyfin_test_btn" class="btn me-auto">
          测试
        </a>
        <a href="javascript:save_mediaserver_config('jellyfin')" id="jellyfin_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-plex" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Plex</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">服务器地址 <span class="form-help"
                                                                  title="配置IP地址和端口，如为https则需要增加https://前缀"
                                                                  data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.plex %}{{ Config.plex.host or '' }}{% endif %}" id="plex.host"
                     class="form-control" placeholder="http://127.0.0.1:32400">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">X-Plex-Token <span class="form-help"
                                                                    title="Plex网页Cookie中的X-Plex-Token，通过浏览器F12->网络中获取，如填写将优先使用；Token与服务器名称、用户名及密码 二选一，推荐使用Token，连接速度更快"
                                                                    data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.plex %}{{ Config.plex.token or '' }}{% endif %}" id="plex.token"
                     class="form-control" placeholder="X-Plex-Token与其它认证信息二选一">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="mb-3">
              <label class="form-label">服务器名称 <span class="form-help"
                                                         title="配置Plex设置->左侧下拉框中看到的服务器名称；如填写了Token则无需填写服务器名称、用户名及密码"
                                                         data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="{% if Config.plex %}{{ Config.plex.servername or '' }}{% endif %}"
                     id="plex.servername" class="form-control">
            </div>
          </div>
          <div class="col-lg-4">
            <div class="mb-3">
              <label class="form-label">用户名</label>
              <input type="text" value="{% if Config.plex %}{{ Config.plex.username or '' }}{% endif %}"
                     id="plex.username" class="form-control" placeholder="">
            </div>
          </div>
          <div class="col-lg-4">
            <div class="mb-3">
              <label class="form-label">密码</label>
              <input type="password" value="{% if Config.plex %}{{ Config.plex.password or '' }}{% endif %}"
                     id="plex.password" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_mediaserver_config('plex')" id="plex_test_btn" class="btn me-auto">
          测试
        </a>
        <a href="javascript:save_mediaserver_config('plex')" id="plex_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 当前处理的类型
  var currType = "";

  // 保存配置
  function save_config(type, func, test) {
    currType = type;
    const params = {"test": test || false};
    $("#modal-" + type + " input").each(function () {
      let value;
      const key = $(this).attr("id");
      if ($(this).attr("type") === "checkbox") {
        value = !!$(this).prop("checked");
      } else {
        value = $(this).val();
      }
      params[key] = value;
    });
    params['media.media_server'] = type;
    ajax_post("update_config", params, func);
  }

  //保存配置、关闭和刷新页面
  function save_mediaserver_config(type) {
    $("#modal-" + type).modal('hide');
    save_config(type, function (ret) {
      navmenu('mediaserver');
    });
  }

  //保存配置和测试配置
  function test_mediaserver_config(type) {
    $("#" + type + "_test_btn").text("测试中...");
    save_config(type, function (ret) {
      let command;
      if (currType === "emby") {
        command = "app.mediaserver.client.emby|Emby";
      } else if (currType === "jellyfin") {
        command = "app.mediaserver.client.jellyfin|Jellyfin";
      } else if (currType === "plex") {
        command = "app.mediaserver.client.plex|Plex";
      }
      ajax_post("test_connection", {"command": command}, function (ret) {
        if (ret.code === 0) {
          $("#" + currType + "_test_btn").text("测试成功");
        } else {
          $("#" + currType + "_test_btn").text("测试失败！");
        }
      });
    }, true);
  }
</script>